import React, { useContext, useEffect, useReducer, useState } from 'react'

// 1. 创建上下文
const TitleContext = React.createContext()

// useContext 该 hooks 是用来接收祖先组件通过 Context.Provider 传递的内容
// useContext 接收一个参数，这个参数就是我们通过 createContext 创建的 Context

const Second = ()=>{

    const user = useContext(TitleContext)

    return (<>
        <h1>Second -- {user.title} -- {user.msg}</h1>
    </>)
}


const First = ()=>{
    // 函数式组件接收 Context 上下文传递的值
    const user = useContext(TitleContext)

    return (<>
        <h1>First -- {user.title} -- {user.msg}</h1>
       
        <Second />
    </>)
}

const App = () => {

  return (
    <div >
        {/* 使用上下文将内容传递到后代组件 */}
        <TitleContext.Provider value={{
            title: '传家宝',
            msg: '失败是成功之母，但是你失败次数多了，...。'
        }}>
            <First />
        </TitleContext.Provider>
    </div>
  )
}

export default App